<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05.v-bind动态绑定style（对象语法）</title>
</head>
<body>
<div id="app">
  <!--<h2 :style="{key(css属性名) : value(css属性值)}">{{message}}</h2>-->
  <!--<h2 :style="{fontSize : finalFontSize + 'px',backgroundColor : finalBackColor}">{{message}}</h2>-->
  <h2 :style="activeStyle">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue',
      finalFontSize: 100,
      finalBackColor: 'red',
      isActive: true
    },
    methods: {
      getStyle() {
        return {fontSize: this.finalFontSize + 'px', backgroundColor: this.finalBackColor};
      }
    },
    computed: {
      activeStyle() {
        return this.isActive ? {fontSize: this.finalFontSize+'px', backgroundColor: this.finalBackColor} : {}
      }
    }
  });
</script>
</body>
</html>
